<!--
 * @Author: your name
 * @Date: 2020-07-29 15:00:15
 * @LastEditTime: 2020-08-24 16:52:32
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \tinkjsDemo\antd-vue-pro\src\views\d3Demo\map.vue
--> 
<template>
<div>
    <svg id="mapDemo" width="800" height="500">
        <g id="mainGroup2" width="800" height="500">
            <path d />
        </g>
    </svg>

    <br />
    <br />
    <br />
    <br />
    <h2>less 特性学习</h2>
    <a-row>
        <a-col :span="8">

            <ruby>变量名:@开头</ruby>
            <pre>
        @color:#d41200;
        .color{
            color:@color;
        }
        </pre>
            <ruby>例子：</ruby>
            <div class="color">变量名测试</div>
        </a-col>
        <a-col :span="8">

            <ruby>混入：mixin</ruby>
            <pre>
        .color{color:#d41200;}
        .mx{
            .color;
           font-size:20px;
        }
        </pre>
            <ruby>例子：</ruby>
            <div class="mx">混入：mixin</div>
        </a-col>
        <a-col :span="8">

            <ruby>继承：extend</ruby>
            <pre>
        .color{color:#d41200;}
        .et{
            &:extend(.color);
           font-size:20px;
        }
        </pre>
            <ruby>例子：</ruby>
            <div class="et">继承：mixin</div>
        </a-col>
        <a-col :span="8">
            <ruby>函数：采用mixin来替代</ruby>
            <pre>
        .color($color:#d41200) {
            @color: darken($color,20%);
        }
        .func{
            .color();
            color: @color;
            font-size:20px;
        }
        </pre>
            <ruby>例子：</ruby>
            <div class="func">函数：mixin</div>
        </a-col>
    </a-row>
</div>
</template>

<script>
import {
    ChinaData
} from 'china-map-geojson';
import d3Tip from 'd3-tip'
d3.tip = d3Tip
export default {
    data() {
        return {}
    },
    mounted() {
        // console.log('topojsonData:',topojsonData)
        //  console.log('topojsonClient:',topojsonClient)
        //  console.log('d3Tip',d3Tip);
        this.initMap()
    },
    methods: {
        initMap() {
            const svg = d3.select('#mapDemo')

            // const projection = d3.geoNaturalEarth1()
            const projection = d3
                .geoMercator()
                // const projection = d3.geoAlbers()
                .fitSize([800, 500], ChinaData)
            // .scale(600)
            // .center([105, 38])
            // .translate([350, 250]);
            const geo = d3.geoPath(projection)

            const tip = d3
                .tip()
                .attr('class', 'd3-tip')
                .html((d) => d.properties.name)
            svg.call(tip)

            const g = svg.select('#mainGroup2')

            g.selectAll('path')
                .data(ChinaData.features)
                .join('path')
                .attr('d', geo)
                .attr('fill', 'blue')
                .attr('opacity', 0.5)
                .attr('stroke', 'black')
                .attr('stroke-width', 1)
                .on('mouseover', function (d) {
                    d3.select(this).attr('fill', 'red').attr('stroke', 'white')
                })
                .on('mouseout', function (d) {
                    d3.select(this).attr('fill', 'blue').attr('stroke', 'black')
                })
                .on('click', tip.show)
        },
    },
}
</script>

<style lang="less">
.d3-tip {
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}

@color: #d41200;

.color {
    color: @color;
}

.color {
    color: #d41200;
}

.mx {
    .color();
    font-size: 20px;
}

.et {
    &:extend(.color);
    font-size: 20px;
}

.color2(@color: #d41200) {
    @color3: darken(@color, 20%);
}

.func {
    .color2();
    color: @color3;
    font-size: 20px;
}
</style>
